<template>
    <div style="background-color: #EDEFF2; height: 20rem;">
        <div class="Top-navigation">
            <div class="navigation-box">
                <div style="margin-left: .3rem;"><van-icon name="arrow-left" @click="onClickLeft" /></div>
                <div>{{ selectedLabel }} <van-icon name="arrow-down" @click="showPopup" />
                    <van-popup v-model="show" round position="top" :style="{ width: '100%' }">
                        <!-- 订单列表 -->
                        <div class="popup-box" style="width: 100%;">
                            <div v-for=" item in options" :key="item.id" @click="changeColor(item)"
                                :style="{ background: item.backgroundColor, color: item.color }">{{ item.label }}</div>
                        </div>
                    </van-popup>

                </div>
                <div style="margin-right: .3rem;" @click="goPhoneNumberSearch">手机查单</div>
            </div>
        </div>
        <!-- 筛选按钮 -->
        <div>
            <van-tabs v-model="active" color="#BFF4F7" background="#EDEFF2">
                <van-tab v-for=" item in Switchingdata " :key="item.id" :title="item.label">
                    <!-- 订单展示 -->
                    <div class="order-box">
                        <div class="orders" v-for="item in Ticketdata" :key="item.id">
                            <div class="presentation-of-information">
                                <div><van-icon class-prefix="icon" name="huochetubiao"></van-icon>{{item.TicketType}}
                                </div>
                                <div>{{item.state1}}</div>
                            </div>
                            <div class="Ticket-information">
                                <div
                                    style="display: flex; justify-content: space-between; margin: .3rem; font-size: .35rem; ">
                                    <div style="display: flex; justify-content: space-between; width: 2rem;">
                                        <div>{{item.placeOfDeparture1}}</div>
                                        <div><van-icon class-prefix=" icon" name="danxaingjiantou"></van-icon></div>
                                        <div>{{item.placeOfDeparture1}}</div>
                                    </div>
                                    <div>
                                        ￥{{item.ticketRates}}
                                    </div>
                                </div>
                                <div style="display: flex; ">
                                    <div style="color:#9c9c9c; margin-left: .3rem;">{{item.lengthOfShift1}}</div>
                                    <div style="color:#00C9E2; line-height: .35rem; margin-left: .1rem;">+1天</div>
                                </div>
                                <div>
                                    <div style="color: #9c9c9c; margin:.1rem .3rem .3rem .3rem;">车次{{item.trainNumber1}}
                                    </div>
                                    <div style="border-bottom: 1px solid #9c9c9c; margin: 0 .3rem 0 .3rem; width: 6rem;">
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div
                                    style="display: flex; justify-content: space-between; margin: .3rem; font-size: .35rem; ">
                                    <div style="display: flex; justify-content: space-between; width: 2rem;">
                                        <div>{{item.placeOfDeparture2}}</div>
                                        <div><van-icon class-prefix=" icon" name="danxaingjiantou"></van-icon></div>
                                        <div>{{item.destination}}</div>
                                    </div>
                                </div>
                                <div style="display: flex;">
                                    <div style="color: #9c9c9c; margin-left: .3rem;">{{item.engthOfShift2}}</div>
                                </div>
                                <div>
                                    <div style="color: #9c9c9c; margin:.1rem .3rem .3rem .3rem;">
                                        车次{{ item.trainNumber2 }}
                                    </div>
                                    <div style="border-bottom: 1px solid #9c9c9c; margin: 0 .3rem 0 .3rem;"></div>
                                </div>
                            </div>
                            <div style="display: flex; justify-content: flex-end; margin: .3rem;">
                                <div style="border-radius: .5rem; border: 1px solid; width: 2rem; height: .6rem; text-align: center;
                                    line-height: .6rem;">
                                    删除订单
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- 没有订单时显示 -->
                    <!-- <div class="placeholder">
                        <div style="margin-top: .5rem;"><img src="https://s.qunarzz.com/q_design_font/images/empty.png"
                                alt=""></div>
                        <div style="margin-top: .3rem; color: rgb(186, 186, 186);">您还没有订单呦~</div>
                    </div> -->
                </van-tab>
            </van-tabs>
        </div>


    </div>
</template>
<script>

import { Myoptions, MySwitchingdata, MyTicketdata } from '../../../api/zhangchu/zhangchuAPI/OrderForm';

export default {
    data() {
        return {
            //弹出框初值
            show: false,
            active: "",
            selectedLabel: '火车票', // 用于存储选中的标签
            options: [],
            Switchingdata: [],
            Ticketdata: [],
        };
    },
    //完毕调用
    created() {
        this.optionsAPI();
        this.SwitchingdataAPI();
        this.TicketdataAPI();
    },
    methods: {
        async optionsAPI() {
            let { data } = await Myoptions()
            this.options = data
        },

        async SwitchingdataAPI() {
            let { data } = await MySwitchingdata()
            this.Switchingdata = data
        },

        async TicketdataAPI() {
            let { data } = await MyTicketdata()
            console.log(data)
            this.Ticketdata = data
        },

        showPopup() {
            this.show = true;
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        goPhoneNumberSearch() {
            this.$router.push('/PhoneNumberSearch')
        },
        changeColor(item) {
            // 检查是否已经有其他元素被选中
            if (this.selectedItem) {
                this.selectedItem.backgroundColor = 'white'; // 恢复先前选中元素的背景颜色
                this.selectedItem.color = 'initial'; // 恢复先前选中元素的文本颜色
            }
            // 更新当前选中的元素
            item.backgroundColor = '#00C9E2';
            item.color = 'white';
            this.selectedLabel = item.label;
            this.selectedItem = item; // 记录当前选中的元素
            this.selectedLabel = item.label; // 设置选中的标签为当前选项的标签
            this.show = false;
        },

    },
};
</script>

<style scoped>
/* 顶部导航 */
.Top-navigation {
    width: 100%;
    height: 1.2rem;
    background-color: #EDEFF2;

}

.navigation-box {
    display: flex;
    line-height: 1.2rem;
    justify-content: space-between;
    font-size: .4rem;
    text-align: center;
}

.navigation-box div {
    width: 25%;
}

/* 订单弹出层 */
.van-popup {
    height: 8rem;
}

.popup-box {
    height: 8rem;
    background-color: #EDEFF2;
    display: flex;
    flex-wrap: wrap;
}

.popup-box div {
    margin: .1rem .3rem 0 .3rem;
    width: 2.7rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    border-radius: .1rem;
    background-color: #fff;
}

/* 没有订单显示 */
.placeholder {
    height: 11rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.placeholder img {
    width: 6rem;
    height: 4rem;

}

.van-popup {
    position: fixed;
    bottom: 10rem;
}

/* 订单 */
.orders {
    height: 7rem;
    background-color: #fff;
    border-radius: .3rem;
    margin: .3rem;
    display: flex;
    flex-direction: column;
}

/* 信息显示 */
.presentation-of-information {
    display: flex;
    justify-content: space-between;
    margin: .3rem;
    font-size: .4rem;
}

.Ticket-information {
    display: flex;
    flex-direction: column;

}
</style>